<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.min.js"></script>
    <script src="./js/vue-router.min.js"></script>
</head>

<body>
    <div id="app">
        <h1>渣浪.com</h1>
        <p>
            <!-- 添加超链接 router-link 组件来进行导航 to属性指定链接 -->
            <router-link to="/home">go to Home</router-link>
            <router-link to="/news">go to news</router-link>
        </p>
        <!-- 路由的出口 路由匹配到组件后 要渲染到这里 -->
        <router-view></router-view>
    </div>
</body>
<script>
    //定义路由所需的组件
    const home = {
        template: "<div>首页</div>"
    };
    const news = {
        template: "<div>新闻</div>"
    };
    //定义路由 每个路由有两部分 path(路径) component(组件)
    const routes = [{
            path: "/home",
            component: home
        }, {
            path: "/news",
            component: news
        }]
        //创建一个路由管理器的实例
    const router = new VueRouter({
            routes: routes,
        })
        //创建Vue实例 将router注入到Vue实例中 让整个应用都有路由的功能
    var VM = new Vue({
        router,
    }).$mount("#app");
</script>

</html>